<template>
    <!-- 吉询价首页 -->
    <img src="../../网站切图图片20240318/吉询价/吉询价-首页-图_03.jpg" style="width:100%">
    <div>
        <!-- 委托询价 -->
        <div :style="{ width: '80rem', height: '30rem', backgroundColor: 'white', marginTop: '2rem' }">
            <p :style="{ fontSize: '30px', fontWeight: 'bold' }">委托询价</p>
            <a-button type="primary" style="background-color:orange;margin-bottom: 2rem;margin-left: 2rem;" size="large"
            @click="redirectToNewInquiry">+ 一键发布</a-button>
            <a-button type="primary" style="background-color:gray; margin-left:2rem" size="large"
            @click="redirectToHistoricalRFQs">历史询价查询</a-button>

            <div class="steps">
                <div class="step">
                    <a-card style="width: 100%; height: 100%; background-color: #FFE4B5;">
                        <img src="../../网站切图图片20240318/吉询价/吉询价-首页-icon_03.jpg" style="margin: 0 auto;display: block;width: 80%; ">
                        <h2 style="text-align: center;"> 1.授权协议</h2>
                        <div style="text-align: center;">全权授权代为询价</div>
                    </a-card>
                </div>
                <div class="step">
                    <a-card style="width: 100%; height: 100%; background-color: #FFE4B5;">
                        <img src="../../网站切图图片20240318/吉询价/吉询价-首页-icon_05.jpg" style="margin: 0 auto;display: block;width: 80%; ">
                        <h2 style="text-align: center;"> 2.发布需求</h2>
                        <div>
                            <ul>
                                <li>填写询价标题</li>
                                <li>填写需求</li>
                                <li>上传附件</li>
                            </ul>
                        </div>
                    </a-card>
                </div>
                <div class="step">
                    <a-card style="width: 100%; height: 100%; background-color: #FFE4B5;">
                        <img src="../../网站切图图片20240318/吉询价/吉询价-首页-icon_07.jpg" style="margin: 0 auto;display: block;width: 80%; ">
                        <h2 style="text-align: center;"> 3.及时响应</h2>
                        <div>
                            <ul>
                                <li>专业团队</li>
                                <li>一对一服务</li>
                            </ul>
                        </div>
                    </a-card>
                </div>
                <div class="step">
                    <a-card style="width: 100%; height: 100%; background-color: #FFE4B5;">
                        <img src="../../网站切图图片20240318/吉询价/吉询价-首页-icon_09.jpg" style="margin: 0 auto;display: block;width: 80%; ">
                        <h2 style="text-align: center;"> 4.支付费用</h2>
                        <div>
                            <ul>
                                <li>核对费用明细</li>
                                <li>支付费用</li>
                                <li>多种支付方式</li>
                            </ul>
                        </div>
                    </a-card>
                </div>
                <div class="step">
                    <a-card style="width: 100%; height: 100%; background-color: #FFE4B5;">
                        <img src="../../网站切图图片20240318/吉询价/吉询价-首页-icon_11.jpg" style="margin: 0 auto;display: block;width: 80%; ">
                        <h2 style="text-align: center;"> 5.完成询价</h2>
                        <div>
                            <ul>
                                <li>短信/邮件提醒</li>
                                <li>服务跟踪</li>
                                <li>收集反馈</li>
                            </ul>
                        </div>
                    </a-card>
                </div>
            </div>
        </div>
        <!-- 案例展示 -->
        <div :style="{ width: '80rem', backgroundColor: 'white', marginTop: '2rem', paddingBottom: '2rem' }">
            <p :style="{ fontSize: '30px', fontWeight: 'bold' }">案例展示</p>
            <p :style="{ fontSize: '60px', fontWeight: 'bold', textAlign: 'center' }">已完成1888条咨询服务</p>
            <div style="display:flex">
                <a-card hoverable style="width: 14rem;margin:1rem;background-color: #FFE4B5">
                    <template #cover>
                        <img alt="example" src="../../网站切图图片20240318/吉询价/吉询价-首页-案例_03.jpg" />
                    </template>
                    <a-card-meta title="材料" style="text-align:center">
                    </a-card-meta>
                </a-card>
                <a-card hoverable style="width: 14rem ;margin:1rem;background-color: #FFE4B5">
                    <template #cover>
                        <img alt="example" src="../../网站切图图片20240318/吉询价/吉询价-首页-案例_05.jpg" />
                    </template>
                    <a-card-meta title="设备" style="text-align:center">
                    </a-card-meta>
                </a-card><a-card hoverable style="width: 14rem ;margin:1rem;background-color: #FFE4B5">
                    <template #cover>
                        <img alt="example" src="../../网站切图图片20240318/吉询价/吉询价-首页-案例_07.jpg" />
                    </template>
                    <a-card-meta title="机械租赁" style="text-align:center">
                    </a-card-meta>
                </a-card><a-card hoverable style="width: 14rem ;margin:1rem;background-color: #FFE4B5">
                    <template #cover>
                        <img alt="example" src="../../网站切图图片20240318/吉询价/吉询价-首页-案例_09.jpg" />
                    </template>
                    <a-card-meta title="劳务分包" style="text-align:center;background-color: #FFE4B5">
                    </a-card-meta>
                </a-card>
                <a-card hoverable style="width: 14rem ;margin:1rem;background-color: #FFE4B5"
                @click="redirectToCaseStudy">
                    <template #cover>
                        <img alt="example" src="../../网站切图图片20240318/吉询价/吉询价-首页-案例_11.jpg" />
                    </template>
                    <a-card-meta title="专业分包" style="text-align:center">
                    </a-card-meta>
                </a-card>

            </div>
        </div>
        <!-- 自主发布 -->
        <div :style="{ width: '80rem', backgroundColor: 'white', marginTop: '40px',paddingBottom:'60px' }">
            <p :style="{ fontSize: '30px', fontWeight: 'bold', display: 'inline-block' }">自主发布</p>
            
            <img src="../../网站切图图片20240318/吉询价/吉询价-首页-已修改_03.jpg" @click="redirectToInquiryQuote" style="display: block;margin: 0 auto;">
        </div>

        <!-- 向其他平台发布询价 -->
        <div
            :style="{ width: '80rem', backgroundColor: 'white', marginTop: '2rem', paddingBottom: '2rem', marginBottom: '10rem' }">
            <p :style="{ fontSize: '30px', fontWeight: 'bold' }">向其他平台发布询价</p>
            <div
                style="margin-left:3rem;margin-right:1rem;background-color:#FFE4B5;padding:1.5rem; display:inline-block">
                <p>慧讯网</p>
                <a-button type="primary" style="background-color:orange; margin-right:1rem">我要询价</a-button>
                <p style="display:inline">5元/条起</p>
            </div>
            <div style="margin:1rem;background-color:#FFE4B5;padding:1.5rem; display:inline-block">
                <p>慧讯网</p>
                <a-button type="primary" style="background-color:orange; margin-right:1rem">我要询价</a-button>
                <p style="display:inline">5元/条起</p>
            </div>
            <div style="margin:1rem;background-color:#FFE4B5;padding:1.5rem; display:inline-block">
                <p>慧讯网</p>
                <a-button type="primary" style="background-color:orange; margin-right:1rem">我要询价</a-button>
                <p style="display:inline">5元/条起</p>
            </div>
            <div style="margin:1rem;background-color:#FFE4B5;padding:1.5rem; display:inline-block">
                <p>慧讯网</p>
                <a-button type="primary" style="background-color:orange; margin-right:1rem">我要询价</a-button>
                <p style="display:inline">5元/条起</p>
            </div>
            <div style="margin:1rem;background-color:#FFE4B5;padding:1.5rem; display:inline-block">
                <p>慧讯网</p>
                <a-button type="primary" style="background-color:orange; margin-right:1rem">我要询价</a-button>
                <p style="display:inline">5元/条起</p>
            </div>


        </div>
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue';
import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import type { UploadChangeParam, UploadProps } from 'ant-design-vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    const redirectToNewInquiry = () => {
      router.push('/newinquiry'); 
    };
    const redirectToHistoricalRFQs = () => {
      router.push('/historicalrfqs'); 
    };
    const redirectToCaseStudy = ()=>{
        router.push('/casestudy'); 
    }
    const redirectToInquiryQuote = ()=>{
        router.push('/inquiryquote'); 
    }

    return {
        redirectToNewInquiry,
        redirectToHistoricalRFQs,
        redirectToCaseStudy,
        redirectToInquiryQuote
    };
  }
};

function getBase64(img: Blob, callback: (base64Url: string) => void) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result as string));
    reader.readAsDataURL(img);
}

const fileList = ref([]);
const loading = ref<boolean>(false);
const imageUrl = ref<string>('');

const handleChange = (info: UploadChangeParam) => {
    if (info.file.status === 'uploading') {
        loading.value = true;
        return;
    }
    if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, (base64Url: string) => {
            imageUrl.value = base64Url;
            loading.value = false;
        });
    }
    if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
    }
};

const beforeUpload = (file: UploadProps['fileList'][number]) => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};
</script>

<style lang="scss" scoped>
.avatar-uploader>.ant-upload {
    width: 128px;
    height: 64px;

}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: white;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: white;
}

.steps {
    width: 95%;
    margin: auto auto auto auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.step {
    width: 17%;
    height: 270px;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}


</style>